# jQuery Mobile Grids

« Previous
Next Chapter »

## jQuery Mobile Layout Grids

jQuery Mobile provides a set of CSS-based column layouts. However, column layouts are not generally recommended on a mobile device, due to the mobile's screen width.

But there are times you want to position smaller elements, like buttons or navigation tabs, side-by-side as if it was in a table. Then, columns are perfect.

Columns in a grid are of equal width (and 100% wide in total), with no border, background, margin or padding.

There are five layout grids that can be used:

Grid Class | Columns | Column Widths | Corresponds To | Example
--- | --- | --- | --- | ---
ui-grid-solo | 1 | 100% | ui-block-a | Try it
ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it
ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it
ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it
ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it

Within the column container, child elements can have the class ui-block-a|b|c|d|e, depending on the number of columns. The columns will float side-by-side.
Example 1: For the ui-grid-a class (which is a two-column layout), you must specify two child elements of ui-block-a and ui-block-b.
Example 2: For ui-grid-b (three-column layout), add three child elements of ui-block-a, ui-block-b and ui-block-c.

## Customize Grids

You can customize your column blocks by using CSS:

## Example

<style>
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
Try it yourself »

You can also customize your blocks by using inline styles:

<div class="ui-block-a" style="border:1px solid black;"><span>Text..</span></div>

## Multiple Rows

It is also possible to have have multiple rows inside your columns.

Note: The ui-block-a-class will always create a new line:

## Example

<div class="ui-grid-b">
<div class="ui-block-a"><span>Some Text</span></div>
<div class="ui-block-b"><span>Some Text</span></div>
<div class="ui-block-c"><span>Some Text</span></div>
<div class="ui-block-a"><span>Some Text</span></div>
<div class="ui-block-b"><span>Some Text</span></div>
<div class="ui-block-a"><span>Some Text</span></div>
</div>
Try it yourself »

## Responsive Grids

On small screens, it is not recommended to have too many buttons with text side-by-side on one row - as the text might get shortened.

For responsive grids, add the ui-responsive class to the container:

## Example

<div class="ui-grid-b ui-responsive">
Try it yourself »
« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples